{% load static %}
<link rel="stylesheet" href="{% static 'polls/style.css' %}">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票列表</title>
    <style>
        /* 整体容器样式 */
        .question-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center; /* 新增：使内容居中 */
        }

        /* 标题样式 */
        .title-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .question-container h2 {
            color: #333;
            margin: 0 10px;
        }

        /* logo 图片样式 */
        .logo-img {
            width: 35px;
            /* 根据实际情况调整图片宽度 */
            height: 35px;
            /* 根据实际情况调整图片高度 */
            background-image: url('{% static "polls/images/logo.png" %}');
            background-size: cover;
        }

        /* 列表样式 */
        .question-list {
            padding: 0;
        }

        .question-list li {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            padding: 15px;
            transition: all 0.3s ease;
        }

        .question-list li:hover {
            background-color: #f0f0f0;
            transform: scale(1.02);
        }

        .question-list li a {
            color: #007BFF;
            text-decoration: none;
            font-weight: 600;
        }

        .question-list li a:hover {
            text-decoration: underline;
        }

        /* 无投票信息提示样式 */
        .no-polls {
            text-align: center;
            color: #777;
        }

        /* 登录按钮样式 */
        .login-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            margin-bottom: 20px; /* 新增：按钮下方的间距 */
            transition: background-color 0.3s ease;
        }

        .login-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="question-container">
        <div class="title-wrapper">
            <h2>最新投票问题</h2>
            <div class="logo-img"></div>
        </div>
        {% if latest_question_list %}
        <ul class="question-list">
            {% for question in latest_question_list %}
            <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="no-polls">No polls are available.</p>
        {% endif %}
        <a href="{% url 'admin:index' %}" class="login-button">登录管理系统</a> <!-- 新增：登录按钮 -->
    </div>
</body>

</html>